<template>
  <view class='order_list-container'>
    <navbar :title="title"></navbar>
    <view class="tabbar-wrapper">
      <view class="tabbar" :style="{top: topBar.style === 'custom'? topBar.height+'px':'0px'}">
        <view :class="['tab', tabIndex === tab.value?'active':'']" v-for="tab in tabbar" :key="tab.label"
              @click="select(tab.value)">
          {{ tab.label }}
          <view class="line" v-if="tabIndex === tab.value"></view>
        </view>
      </view>
    </view>
    <view v-if="inited">
      <view v-if="list.length">
        <view class="container" v-for="item in list" @click="toDetail(item)" :key="item.id">
          <view class="flex v">
            <view class="order_id">
              <text>订单号：{{ item.id }}</text>
              <view class="f1"></view>
              <text class="status">{{ statusFormat(item) }}</text>
            </view>
            <view class="flex">
              <image class="cover" :src="item.productCoverUrl256" mode="aspectFill"></image>
              <view class="f1 flex v">
                <view class="f1">
                  <text class="title">{{ item.productTitle }}</text>
                </view>
                <text class="pay_fee">
                  <text class="unit">￥</text>
                  {{ item.totalAmount / 100 }}
                </text>
              </view>
            </view>
            <view class="flex">
              <view class="f1"></view>
              <!-- #ifdef MP-TOUTIAO -->
              <view class="btn" v-if="appType === 1 && showStudy(item)" @click.stop="toStudy(item)">
                去学习
              </view>
              <!-- #endif -->
              <view class="btn detail">
                订单详情
              </view>
            </view>
          </view>
        </view>
      </view>
      <view v-else>
        <image src="http://down.qwdata.vip/app_icon/1677854489495" class="empty-icon"></image>
      </view>
    </view>
  </view>
</template>

<script>
import Navbar from "@/components/navbar";
import {orderApi} from "@/api";
import {mapGetters} from 'vuex'

export default {
  name: 'order_list',
  components: {Navbar},
  data() {
    return {
      title: '我的订单',
      list: [],
      tabbar: [
        {
          label: '待支付',
          value: 0
        },
        {
          label: '已支付',
          value: 1
        },
        {
          label: '已退款',
          value: 6
        },
        {
          label: '已取消',
          value: 2
        },
      ],
      inited: false,
      tabIndex: 0
    }
  },
  computed: {
    ...mapGetters(['topBar', 'appType']),
  },
  onLoad() {
    this.inited = false
    uni.setNavigationBarTitle({
      title: this.title
    })
    this.init()
  },
  async onPullDownRefresh() {
    console.log('onPullDownRefresh')
    await this.init()
    uni.stopPullDownRefresh();
  },
  methods: {
    async init() {
      const res = await orderApi.list(this.appType === 1 ? 1 : 0, this.tabIndex)
      this.list = res.data.data.list
      this.inited = true
    },
    statusFormat(order) {
      if (order.refunds && order.refunds.length) {
        if (order.refunds[order.refunds.length - 1].auditStatus === 1) {
          return '已退款'
        }
      }

      return order.statusStr
    },
    showStudy(order) {
      if (order.status === 1) {
        if (order.refunds && order.refunds.length) {
          if (order.refunds[order.refunds.length - 1].auditStatus === 1) {
            return false
          }
        }
        return true
      }
    },
    toStudy(order) {
      if (order.refunds && order.refunds.length) {
        if (order.refunds[order.refunds.length - 1].auditStatus === 0) {
          uni.showToast({
            title: '正在申请退款中，课程不可用！',
            icon: 'none',
            duration: 2000
          });
        }
      }
      uni.navigateTo({
        url: '/pages/course_enter/course_enter?order_id=' + order.id
      })
    },
    toDetail(order) {
      uni.navigateTo({
        url: '/pages/order_detail/order_detail?id=' + order.id
      })
    },
    select(status) {
      if (this.tabIndex === status) {
        return
      }

      this.tabIndex = status
      this.init()
    }
  }
}
</script>

<style lang='scss'>
page {
  background-color: #f7f7f7;

  .tabbar-wrapper {
    height: 100rpx;

    .tabbar {
      background-color: #f7f7f7;
      height: 100rpx;
      position: fixed;
      left: 0;
      right: 0;
      display: flex;

      .tab {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;

        font-size: 16px;
        color: #999;

        .line {
          background-color: #0D94FF;
          width: 32rpx;
          height: 6rpx;
          border-radius: 6rpx;
          position: absolute;
          bottom: 0;
        }

        &.active {
          color: #000;
        }
      }
    }
  }
}

.order_list-container {
  .container {
    margin: 30rpx;
    background-color: #fff;
    border-radius: 20rpx;
    padding: 30rpx;

    .cover {
      width: 176rpx;
      height: 176rpx;
      margin-right: 24rpx;
      border-radius: 16rpx;
    }

    .title {
      font-size: 15px;
      line-height: 22px;
      color: #000;
      font-weight: bold;
    }

    .pay_fee {
      color: #F8330B;
      font-size: 22px;
      font-weight: bold;

      .unit {
        font-size: 15px;
      }
    }

    .order_id {
      background-color: #f4f4f4;
      height: 66rpx;
      border-radius: 6rpx;
      display: flex;
      align-items: center;
      padding-left: 20rpx;
      padding-right: 20rpx;
      font-size: 12px;
      margin-bottom: 30rpx;
      color: #303030;
    }

    .status {
      color: #F8330B;
    }

    .btn {
      height: 64rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      margin-top: 30rpx;
      border: 1px solid #ccc;
      margin-left: 30rpx;
      padding: 0 30rpx;
      border-radius: 40rpx;

      &.detail {
        border: 1px solid #3274f6;
        color: #3274F6FF;
      }
    }
  }

  .empty-icon {
    width: 300rpx;
    height: 300rpx;
    margin-left: 225rpx;
    margin-top: 200rpx;
  }
}
</style>
